<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
    </keep-alive>

    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
  </router-view>

  <!-- 页面切换动画（有bug，暂时用不了） -->
  <!-- <transition :name="$router.customRouterData.transitionName">
  </transition> -->

  <!-- Vant标签栏 -->
  <van-tabbar v-model="active" active-color="#EE0A24" inactive-color="#969799" route>
    <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="hotel-o" to="/community">社区</van-tabbar-item>
    <van-tabbar-item icon="aim" to="/gamestore">游戏库</van-tabbar-item>
    <van-tabbar-item icon="contact" to="/profile">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
</script>

<style>
@import "./assets/css/normalize.css";
@import "./assets/css/routerAnimation.css";
@import "@wangeditor/editor/dist/css/style.css";
</style>
